<div class="dialog-heading">
	<h1 id="media_wd_heading" mat-dialog-title>Media Wall Design</h1>
	<button class="form-close" mat-dialog-close>x</button>
</div>
<div>
	<h3 class="heading">Header</h3>
	<div class="full-width">
		<div class="input-group">
			<div class="slider">
				<mat-slide-toggle
					labelPosition="before"
					ariaLabel="Show/Hide Header"
					(change)="showHideHeader($event)"
					[checked]="showHideHeaderValue === false">
					Hide Header
				</mat-slide-toggle>
			</div>
		</div>
		<div class="input-group">
			<label class="form-label" for="title" >Header Title</label>
			<input type="title"
				name="title"
				placeholder="Enter your title Here"
				[(ngModel)]="headerTitle">
		</div>
	</div>
	<h3>Wall</h3>
		<div class="full-width">
			<div class="input-group">
				<label class="form-label" for="count" >Column Count</label>
				<mat-select name="count"
					floatPlaceholder="never"
					placeholder="{{selectedColumnCount}} Column"
					id="selectedColumnId"
					[(ngModel)]="selectedColumnCount">
					<mat-option *ngFor="let number of ['Automatic','1','2','3','4','5','6','7']" [value]="number">
      		{{number}} Column
    			</mat-option>
				</mat-select>
			</div>
			<div class="input-group">
				<label class="form-label" for="count" id="count">Count of new Feeds</label>
			<mat-select name="count"
				floatPlaceholder="never"
				placeholder="{{selectedFeedsCount}}"
				id="selectedFeedsId"
				[(ngModel)]="selectedFeedsCount">
				<mat-option *ngFor="let count of ['1','2','3','4','5']" [value]="count">
     		{{count}}
   			</mat-option>
			</mat-select>
		</div>
	</div>
	<h3>Cards Design</h3>
	<div class="full-width">
		<div class="input-group">
			<label class="form-label" for="card-style" id="card_style">Card Style</label>
			<mat-select name="card-style"
				floatPlaceholder="never"
				placeholder="{{selectedCardStyle}}"
				id="selectedCardId"
				[(ngModel)]="selectedCardStyle">
				<mat-option *ngFor="let style of ['Fluid','Candy']" [value]="style">
 	     {{style}}
  		  </mat-option>
			</mat-select>
		</div>
	</div>
	<div class="full-width">
		<span class="apply-button">
			<button (click)="change()">
				<i class="material-icons md-18">done</i>
				Apply
			</button>
		</span>
	</div>
</div>
